import { Form, Input, Col, Row } from 'antd';

const BaseForm = (props) => {

    const _onFinish = (values) => {
        props.onSubmit(values)
    }

    return (
        <Form
            {...props.config.formProp}
            onFinish={_onFinish}>
            <Row>
                {
                    props.config.formItems.map((item, index) => (
                        <Col {...props.config.colLayout} key={index} style={{ ...props.config.itemStyle }}>
                            <Form.Item
                                label={item.label}
                                name={item.name}
                                rules={item.rules}
                            >
                                {/* input */}
                                {
                                    item.type === "input" &&
                                    <Input {...item.otherOptions} />
                                }
                                {/* password */}
                                {
                                    item.type === "password" &&
                                    <Input  {...item.otherOptions} />
                                }
                            </Form.Item>
                        </Col>
                    ))
                }
                <Col {...props.config.colLayout} style={{ ...props.config.itemStyle }}>
                    {props.children}
                </Col>
            </Row>
        </Form >
    )
}

export default BaseForm